<script setup lang="ts">
import {
  Viewer,
  UrlTemplateImageryProvider,
  ImageryLayer,
  Math,
  Cartesian3,
  OpenStreetMapImageryProvider,
  WebMapTileServiceImageryProvider,
} from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import { onMounted, ref } from 'vue'
;(window as any).CESIUM_BASE_URL = '/cesium'
const contentRef = ref<HTMLDivElement>()

onMounted(() => {
  const viewer = new Viewer(contentRef.value!, {
    infoBox: false,
    /** 搜索框 */
    geocoder: false,
    /** home按钮 */
    homeButton: false,
    // 动画控件
    animation: false,
    // 全屏按钮
    fullscreenButton: false,
    // 场景模式选择器
    sceneModePicker: false,
    // 时间轴
    timeline: false,
    // 导航提示
    navigationHelpButton: false,
    // 地图选择器
    baseLayerPicker: false,
    // // 天地图矢量路径图
    // imageryProvider: new WebMapTileServiceImageryProvider({
    //   url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=e1b3504ab9c8245cc6b8c681e1589831",
    //   layer: "tdtBasicLayer",
    //   style: "default",
    //   format: "image/jpeg",
    //   tileMatrixSetID: "GoogleMapsCompatible",
    // }),
    // 天地图影像服务
    imageryProvider: new WebMapTileServiceImageryProvider({
      url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=e1b3504ab9c8245cc6b8c681e1589831',
      layer: 'tdtBasicLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible',
      minimumLevel: 1,
      maximumLevel: 18,
    }),
    // OSM地图,
    // imageryProvider: new OpenStreetMapImageryProvider({
    //   url: "https://a.tile.openstreetmap.org/",
    // }),
    // 高德矢量地图,
    // imageryProvider: new UrlTemplateImageryProvider({
    //   url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    //   minimumLevel: 1,
    //   maximumLevel: 18,
    // }),
    // geoServer TMS地图
    // imageryProvider: new UrlTemplateImageryProvider({
    //   url: 'http://192.168.33.48:8080/geoserver/gwc/service/tms/1.0.0/suzhou_map%3Akunshan_map@EPSG%3A3857@png/{z}/{x}/{reverseY}.png',
    //   minimumLevel: 1,
    //   maximumLevel: 18,
    // }),
  })

  const tDProvider = new WebMapTileServiceImageryProvider({
    url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=e1b3504ab9c8245cc6b8c681e1589831',
    layer: 'tdtBasicLayer',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'GoogleMapsCompatible',
    minimumLevel: 1,
    maximumLevel: 18,
  })

  const layer = new ImageryLayer(tDProvider, { alpha: 0.8 })
  // const layer = new ImageryLayer(
  //   new UrlTemplateImageryProvider({
  //     url: 'http://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
  //     minimumLevel: 1,
  //     maximumLevel: 18,
  //   }),
  //   {}
  // )

  viewer.imageryLayers.add(layer)

  viewer.camera.flyTo({
    destination: Cartesian3.fromDegrees(120.980795, 31.385476, 1600),
    orientation: {
      heading: Math.toRadians(0.0),
      pitch: Math.toRadians(-45.0),
    },
  })
})
</script>

<template>
  <div class="cesium-test" ref="contentRef"></div>
</template>

<style lang="scss" scoped>
.cesium-test {
  height: 100%;
  width: 100%;
}
</style>
